<template>
  <div id="root" z-index="1" v-show="WeChatState">
    <div class="top">
      <svg class="icon" aria-hidden="true" @click="WeChatFn()">
        <use xlink:href="#icon-diannaojiaobiao"></use>
      </svg>
    </div>
    <i class="#icon-erweimajiaobiao"></i>
    <h1>微信扫码登录</h1>
    <div class="btm">
      <i
        class="img"
        :style="maskBg"
        v-show="imgState"
        @click="imgStateFn()"
      ></i>
      <div class="loading" v-loading="loading">
        <img :src="imgSrc" class="code" alt="" />
      </div>
      <p id="p">请使用手机微信扫码登入</p>
      <!-- <div class="el-loading-mask"></div> -->
    </div>
  </div>
</template>

<script>
import { postAcquireVerification, getWeChatRegister } from "../../../api/login";
// 引入socketio服务器
import socketIo from "socket.io-client";
import storage from "../../../utils/storage";
import qr from "qrcode";
import invalidImg from "../../../assets/imgs/invalidQr.01700605.png";
import scanSuccessImg from "../../../assets/imgs/微信图片_20220825221904.png";
export default {
  data() {
    return {
      // imgState: true,
      // loading: false,
      loading: true,
      imgState: false,
      imgSrc: "",
      // maskBg: { backgroundImage: `url(${scanSuccessImg})` }, //扫码成功
      maskBg: { backgroundImage: `url(${invalidImg})` }, //扫码失败
    };
  },
  watch: {
    WeChatState(newVal, oldVal) {
      this.WeChatStateFn();
      this.loading = true;
      this.imgState = false;
      this.maskBg = { backgroundImage: `url(${invalidImg})` };
      console.log(this.loading);
      // this.imgFn();
    },
  },
  props: {
    WeChatState: {
      type: Boolean,
      required: true,
    },
  },
  created() {
    // if (WeChatState) {
    // let io = socketIo("wss://chst.vip");
    // io.on("connectSuccess", async ({ sid }) => {
    //   //将sid存到本地
    //   console.log(sid);
    //   storage.set("qf-sid", sid);
    //   this.getWeChat(sid);
    // });
    // io.on("invalidCode", () => {
    //   console.log(2);
    //   this.imgState = true;
    // });
    // io.on("scancodeSuccess", () => {
    //   console.log(3);
    // });
    // }
  },
  mounted() {},
  methods: {
    setFn({ userInfo, token, permission }) {
      storage.set("userInfo", userInfo);
      storage.set("token", token);
      storage.set("permission", permission);
    },
    async getWeChat(sid) {
      let res = await postAcquireVerification(sid);
      if (res.data.status === 200) {
        let scanCodeUrl = res.data.scanCodeUrl;
        qr.toDataURL(scanCodeUrl, (err, url) => {
          if (err) throw err;
          this.imgSrc = url;
          this.loading = false;
        });
      }
    },
    WeChatFn() {
      this.$emit("WeChatEvent");
    },
    WeChatStateFn() {
      let io = socketIo("wss://chst.vip");
      io.on("connectSuccess", async ({ sid }) => {
        //将sid存到本地
        storage.set("qf-sid", sid);
        this.getWeChat(sid);
      });
      io.on("invalidCode", () => {
        this.imgState = true;
        document.getElementById("p").innerHTML = "";
        document.getElementById("p").innerHTML = "二维码失效,请点击刷新二维码";
      });
      io.on("scancodeSuccess", async ({ state, wechatCode, msg }) => {
        this.imgState = true;
        this.maskBg = { backgroundImage: `url(${scanSuccessImg})` };
        document.getElementById("p").innerHTML = "";
        document.getElementById("p").innerHTML = "正在登录中...";
        if (state) {
          let res = await getWeChatRegister(wechatCode);
          if (res.data.state) {
            // location.reload();
            this.setFn(res.data);
            this.$router.push("/");
          } else {
            console.log(res.data.msg);
          }
        } else {
          console.error(msg);
        }
      });
    },
    imgStateFn() {
      this.WeChatStateFn();
      this.loading = true;
      this.imgState = false;
      document.getElementById("p").innerHTML = "";
      document.getElementById("p").innerHTML = "请使用手机微信扫码登入";
      console.log(this.loading);
    },
  },
};
</script>

<style lang="less" scoped>
#svg {
  color: #888;
  text-decoration: underline;
  background: #fff;
  display: inline-block;
  height: 45px;
  width: 110px;
  text-align: center;
  cursor: pointer;
  border: 0;
  border-radius: 0 5px 5px 0;
}
#root {
  width: 400px;
  height: 500px;
  color: #fff;
  border-radius: 10px;
  background: rgba(0, 47, 161, 0.4);
}
/deep/ .el-form-item__label {
  color: #fff;
}
.top {
  width: 100%;
  height: 100px;
}
h1 {
  text-align: center;
  margin: 20px 0;
}
.loading {
  width: 200px;
  height: 200px;
  display: inline-block;
}
.btm {
  text-align: center;
}
.code {
  width: 200px;
  height: 200px;
  display: inline-block;
}
.img {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.6;
  background-color: #fff;
  // background-image: url("../../../assets/imgs/微信图片_20220825221904.png");
  // background-image: url("../../../assets/imgs/invalidQr.01700605.png");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: 50%;
  z-index: 999;
  cursor: pointer;
}
.btm p {
  margin-top: 0px;
}
.icon {
  color: #b2c1e8;
  font-size: 60px;
  position: relative;
  left: 340px;
}
// .img {
//   width: 200px;
//   height: 200px;
//   opacity: 0.8;
//   background-color: #fff;
//   position: relative;
//   position: absolute;
//   left: 0;
//   font-style: italic;
//   background-size: 50%;
//   background-position: 50%;
//   background-repeat: no-repeat;
//   animation-play-state: paused;
//   cursor: pointer;
//   text-align: center;
//   background-image: url(../../../assets/imgs/invalidQr.01700605.png);
// }
// .el-loading-mask {
//   position: absolute;
//   z-index: 2000;
//   background-color: hsla(0, 0%, 100%, 0.9);
//   margin: 0;
//   top: 0;
//   right: 0;
//   bottom: 0;
//   left: 0;
//   transition: opacity 0.3s;
// }
</style>
